<template>
    <el-menu
            class="categories"
            default-active="0"
            @select="handleSelect"
            active-text-color="red">
        <el-menu-item index="0">
            <i class="el-icon-menu"></i>
            <span slot="title">全部</span>
        </el-menu-item>

        <el-menu-item :index= "category.id" v-for="(category,index2) in categories" :key="index2">
            <i class="el-icon-loading"></i>
            <span slot="title">{{category.name}}</span>
        </el-menu-item>

    </el-menu>
</template>

<script>
    export default {
        name: 'SideMenu',
        data () {
            return {
                categories:[],
                cid: ''
            }
        },
        methods: {
            handleSelect (key, keyPath) {
                console.log(keyPath)
                this.cid = key
                this.$emit('indexSelect')
            },
            getCategories(){
                const _this = this
                _this.$axios.get("/categories").then(res => {
                    console.log(res)
                    _this.categories = res.data.data
                })
            }
        },
        created(){
            this.getCategories();
        }
    }
</script>

<style scoped>
    .categories {
        position: fixed;
        margin-left: 50%;
        left: -600px;
        top: 100px;
        width: 150px;
    }
</style>

